<template>
  <div class="home-container">
      
        <!-- 轮播图区域 -->
        <swiper></swiper>

        <b-container class="bv-example-row">
            <!-- 电视剧区域 -->
            <div class="tv-container">
                <!-- 电视剧导航区域 -->
                <div>
                    <b-nav>
                        <b-nav-item :class="item.value=='' ? 'main' : ''" :to="'/tvList/' + item.id" v-for="item in parentType" :key="item.id">{{ item.name }}</b-nav-item>
                    </b-nav>
                </div>
                <!-- 电视剧内容区域 -->
                <b-row class="row-content">
                    <b-col cols="6" sm="6" md="3" lg="3" v-for="item in tvList" :key="item.tvId">
                        <div>
                            <b-card
                                :title="item.tvName"
                                :img-src="item.tvImg"
                                img-alt="Image"
                                img-top
                                tag="router-link"
                                :to="'/tvInfo/' + item.tvId"
                                style="max-width: 20rem;"
                                class="mb-2"
                            >
                                <b-card-text>
                                {{ item.tvIntro }} 
                                </b-card-text>
                            </b-card>
                        </div>
                    </b-col>
                </b-row>
            </div>
            
            <!-- 电影区域 -->
            <div class="movie-container">
                <!-- 电影导航区域 -->
                <div>
                    <b-nav>
                        <b-nav-item :class="item.value=='' ? 'main' : ''" :to="'/movieList/' + item.id" v-for="item in parentPlace" :key="item.id">{{ item.name }}</b-nav-item>
                    </b-nav>
                </div>
                <!-- 电影内容区域 -->
                <b-row class="row-content">
                    <b-col cols="12" sm="12" md="6" lg="6">
                        <div class="self">
                            <b-card
                                :title="movieOne.mName"
                                :img-src="movieOne.mImg"
                                img-alt="Image"
                                img-top
                                tag="router-link"
                                :to="'/movieInfo/' + movieOne.mId"
                                style="max-width: 100%;"
                                class="mb-2"
                            >
                                <b-card-text>
                                {{ movieOne.mIntro }}
                                </b-card-text>
                            </b-card>
                        </div>
                    </b-col>
                    <b-col cols="12" sm="12" md="6" lg="6">
                        <b-row>
                            <b-col cols="6" sm="6" md="6" lg="6" v-for="(item,i) in movieList.slice(1,3)" :key="i">
                                <div>
                                    <b-card
                                        :title="item.mName"
                                        :img-src="item.mImg"
                                        img-alt="Image"
                                        img-top
                                        tag="router-link"
                                        :to="'/movieInfo/' + item.mId"
                                        style="max-width: 20rem;"
                                        class="mb-2"
                                    >
                                        <b-card-text>
                                        {{ item.mIntro }} 
                                        </b-card-text>
                                    </b-card>
                                </div>
                            </b-col>
                        </b-row>
                        <b-row>
                            <b-col cols="6" sm="6" md="6" lg="6" v-for="(item,i) in movieList.slice(3,5)" :key="i">
                                <div>
                                    <b-card
                                        :title="item.mName"
                                        :img-src="item.mImg"
                                        img-alt="Image"
                                        img-top
                                        tag="router-link"
                                        :to="'/movieInfo/' + item.mId"
                                        style="max-width: 20rem;"
                                        class="mb-2"
                                    >
                                        <b-card-text>
                                        {{ item.mIntro }} 
                                        </b-card-text>
                                    </b-card>
                                </div>
                            </b-col>
                        </b-row>
                    </b-col>
                </b-row>
            </div>
            <!-- 综艺区域 -->
            <div class="variety-container">
                <!-- 综艺导航区域 -->
                <div>
                    <b-nav>
                        <b-nav-item :class="item.value=='' ? 'main' : ''" :to="'/varietyList/' + item.id" v-for="item in parentVariety" :key="item.id">{{ item.name }}</b-nav-item>
                    </b-nav>
                </div>
                <!-- 综艺内容区域 -->
                <b-row class="row-content">
                    <b-col cols="6" sm="6" md="3" lg="3" v-for="item in varietyList" :key="item.vId">
                        <div>
                            <b-card
                                :title="item.vName"
                                :img-src="item.vImg"
                                img-alt="Image"
                                img-top
                                tag="router-link"
                                :to="'/varietyInfo/' + item.vId"
                                style="max-width: 20rem;"
                                class="mb-2"
                            >
                                <b-card-text>
                                {{ item.vIntro }} 
                                </b-card-text>
                            </b-card>
                        </div>
                    </b-col>
                </b-row>
            </div>
        </b-container>
  </div>
</template>

<script>

// 1.导入 MUI 的JS 文件
import mui from '../../lib/mui/js/mui.min.js'
import swiper from '../subcomponents/swiper.vue'

export default {
    data(){
        return{
            channel:[
                {id:1,name:"电视剧",value:"tv"},
                {id:2,name:"综艺",value:"variety"},
                {id:3,name:"电影",value:"movie"},
            ],
            parentType:[
                {id:1,name:"电视剧",value:""},
                {id:2,name:"喜剧",value:"喜剧"},
                {id:3,name:"悬疑",value:"悬疑"},
                {id:4,name:"都市",value:"都市"},
                {id:5,name:"爱情",value:"爱情"},
                {id:6,name:"奇幻",value:"奇幻"},
            ],
            parentPlace:[
                {id:1,name:"电影",value:""},
                {id:2,name:"内地",value:"内地"},
                {id:3,name:"香港",value:"香港"},
                {id:4,name:"印度",value:"印度"},
                {id:5,name:"美国",value:"美国"},
                {id:6,name:"其他",value:"其他"},
            ],
            parentVariety:[
                {id:1,name:"综艺",value:""},
                {id:2,name:"美妆",value:"美妆"},
                {id:3,name:"旅行",value:"旅行"},
                {id:4,name:"演技",value:"演技"},
                {id:5,name:"经营",value:"经营"},
                {id:6,name:"游戏",value:"游戏"}
            ],
            tvList:[], //保存电视剧的数组
            movieOne:[], //保存电影数组的第一条数据
            movieList:[], //保存电影的数组
            varietyList:[], //保存综艺的数组
        }
    },
    mounted() { // 当 组件中的DOM结构被渲染好并放到页面中后，会执行这个 钩子函数
        // 如果要操作元素了，最好在 mounted 里面，因为，这里时候的DOM元素 是最新的
        // 2.初始化滑动插件
        mui('.mui-scroll-wrapper').scroll({
            deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
    },
    created() {
        this.getTv();
        this.getMovie();
        this.getVariety();
    },
    methods:{
        getTv(){
            // 获取电视剧前4条内容的方法
            this.$http.get("tv/findLimit").then(result => {
                this.tvList = result.body;
            })
        },
        getMovie(){
            // 获取电影前5条内容的方法
            this.$http.get("movie/findLimit").then(result => {
                this.movieList = result.body;
                this.movieOne = result.body[0];
            })
        },
        getVariety(){
            // 获取电视剧前4条内容的方法
            this.$http.get("variety/findLimit").then(result => {
                this.varietyList = result.body;
            })
        },
    },
    components:{
        swiper
    }
}
</script>

<style lang="scss" scoped>
// 使用MUI的滑动组件时Chrome报的警告
*{
    touch-action:pan-y;
}
.home-container{
    a{
        color:#555;
    }
    a:hover{
        .card-title{
            color:#2d8cf0;
        }
    }
    .bv-example-row{
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .tv-container{
        margin-bottom: 2rem;
    }
    .movie-container{
        margin-bottom: 2rem;
    }
    .row-content{
        padding-top: 1rem;
        
        .self{
            .card-body{
            .card-title {
                margin-bottom: 1rem;
                padding-top: 0.5rem;
                padding-left: 0.5rem;
                font-size: 1.3rem;
                font-weight: bold;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
            .card-text{
                font-size: 1rem;
                padding-bottom: 0.4rem;
                padding-left: 0.5rem;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }
        }
    }
    .card-body{
        padding: 0.5rem;
        .card-title {
            margin-bottom: 0rem;
            font-size: 0.9rem;
            font-weight: bold;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .card-text{
            font-size: 0.8rem;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    }
    .main{
        a{
            color:#2d8cf0;
        }
        font-size: 1rem;
    }
    .nav-link{
        padding: 0.5rem 0.7rem;
    }
    .main a:nth-child(1){
        padding-left: 0;
    }
    .active{
        color:#2d8cf0;
    }
    
    .variety-container{
        margin-bottom: 2rem;
        .img-card{
            width:100%;
            height:auto;
        }
        .info{
            padding: 10px 0;
            .variety-name{
                font-size: 0.9rem;
                font-weight: bold;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
            .variety-intro{
                font-size: 0.8rem;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

        }
    }
}
</style>